import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

// Define product features data
const features = [
  {
    title: "高效稳定",
    description: "99.9% 服务可用性，企业级数据安全保障",
    icon: "fa-cloud"
  },
  {
    title: "简单易用",
    description: "直观的管理界面，无需专业技术背景也能轻松上手",
    icon: "fa-user-circle"
  },
  {
    title: "弹性扩展",
    description: "根据业务需求自动调整资源，降低运维成本",
    icon: "fa-expand-arrows-alt"
  },
  {
    title: "智能分析",
    description: "内置AI数据分析工具，助力业务决策",
    icon: "fa-chart-line"
  }
];

// Define download options
const downloadOptions = [
  {
    platform: "Windows",
    version: "2.3.5",
    size: "45.2 MB",
    icon: "fa-windows",
    link: "#"
  },
  {
    platform: "macOS",
    version: "2.3.5",
    size: "42.8 MB",
    icon: "fa-apple",
    link: "#"
  },
  {
    platform: "Linux",
    version: "2.3.5",
    size: "38.5 MB",
    icon: "fa-linux",
    link: "#"
  },
  {
    platform: "移动端",
    version: "1.8.2",
    size: "18.7 MB",
    icon: "fa-mobile-alt",
    link: "#"
  }
];

export default function Home() {
  // Generate image URLs using the provided API
  const generateImageUrl = (prompt: string) => {
    const encodedPrompt = encodeURIComponent(prompt);
    return `https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=%24%7BencodedPrompt%7D&sign=b95776012e22722add20fe5443d1c503`;
  };
  
  const heroImageUrl = generateImageUrl("Cloud computing platform dashboard, modern UI design, data visualization, clean interface, professional software");
  const productImageUrl = generateImageUrl("Cloud service architecture diagram, connected devices, data flow visualization, technology illustration");

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 text-slate-900 dark:text-slate-100">
      {/* Navigation */}
      {/* <header className="sticky top-0 z-50 backdrop-blur-md bg-white/80 dark:bg-slate-900/80 border-b border-slate-200 dark:border-slate-700">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <i className="fa-cloud text-blue-600 dark:text-blue-400 text-2xl mr-2"></i>
              <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">CloudPro</span>
            </div>
            <nav className="hidden md:flex space-x-8">
              <a href="#features" className="text-sm font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors">产品特性</a>
              <a href="#video" className="text-sm font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors">视频讲解</a>
              <a href="#download" className="text-sm font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors">下载使用</a>
              <a href="#contact" className="text-sm font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors">联系我们</a>
            </nav>
            <div className="flex items-center space-x-4">
              <button className="hidden md:block px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors">登录</button>
              <button className="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-full hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors shadow-md hover:shadow-lg">免费试用</button>
            </div>
          </div>
        </div>
      </header> */}

      <main>
        {/* Hero Section */}
        <section className="relative py-10 md:py-16 overflow-hidden">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
              >
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-tight">
                  云服务器虚拟机<br />
                  {/* <span className="bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
                    赋能企业数字化转型
                  </span> */}
                </h1>
                <p className="text-lg md:text-xl text-slate-600 dark:text-slate-300 mb-8 max-w-lg">
                  云服务器提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。使用可以极大降低您的软硬件采购成本，简化 IT 运维工作。
                </p>
                <div className="flex flex-col sm:flex-row gap-4">
                  <button className="px-8 py-3 text-base font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-full hover:bg-blue-700 dark:hover:bg-blue-600 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5">
                    了解更多
                  </button>
                  <button className="px-8 py-3 text-base font-medium text-blue-600 dark:text-blue-400 bg-white dark:bg-slate-800 rounded-full border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5">
                    <i className="fa-play-circle mr-2"></i>观看演示
                  </button>
                </div>
                {/* <div className="mt-12 flex items-center space-x-6">
                  <div className="flex -space-x-2">
                    {[1, 2, 3, 4].map(num => (
                      <div key={num} className="w-10 h-10 rounded-full border-2 border-white dark:border-slate-900 overflow-hidden">
                        <img 
                          src={`https://picsum.photos/200/200?random=${num}`} 
                          alt="User avatar" 
                          className="w-full h-full object-cover"
                        />
                      </div>
                    ))}
                  </div>
                  <div>
                    <div className="flex items-center text-yellow-500 mb-1">
                      {[1, 2, 3, 4, 5].map(num => (
                        <i key={num} className="fa-star text-xs"></i>
                      ))}
                      <span className="ml-2 text-sm font-medium">4.9/5</span>
                    </div>
                    <p className="text-sm text-slate-600 dark:text-slate-300">来自2,000+企业用户的信赖</p>
                  </div>
                </div> */}
              </motion.div>
              <motion.div 
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
                className="relative"
              >
                <div className="rounded-2xl overflow-hidden shadow-2xl">
                  <img 
                    src={heroImageUrl} 
                    alt="CloudPro平台界面" 
                    className="w-full h-auto object-cover"
                  />
                </div>
                {/* <div className="absolute -bottom-6 -left-6 bg-white dark:bg-slate-800 p-4 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 max-w-xs">
                  <div className="flex items-center space-x-3 mb-2">
                    <div className="bg-green-100 dark:bg-green-900/30 p-2 rounded-full">
                      <i className="fa-line-chart text-green-600 dark:text-green-400"></i>
                    </div>
                    <h3 className="font-medium">资源使用效率提升</h3>
                  </div>
                  <p className="text-sm text-slate-600 dark:text-slate-300">平均节省IT基础设施成本达42%</p>
                </div> */}
              </motion.div>
            </div>
          </div>
          <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-blue-500/5 to-transparent -skew-x-12 transform origin-top-right"></div>
        </section>

        {/* Product Introduction Section */}
        <section id="features" className="py-20 bg-white dark:bg-slate-900">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="text-center max-w-3xl mx-auto mb-16"
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-4">强大功能，简单操作</h2>
              <p className="text-lg text-slate-600 dark:text-slate-300">
                CloudPro整合了多种企业级云服务功能，为您提供全方位的数字化解决方案
              </p>
            </motion.div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {features.map((feature, index) => (
                <motion.div 
                  key={feature.title}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  className="bg-slate-50 dark:bg-slate-800 p-6 rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
                >
                  <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-4 text-blue-600 dark:text-blue-400">
                    <i className={`fa-${feature.icon} text-xl`}></i>
                  </div>
                  <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                  <p className="text-slate-600 dark:text-slate-300">{feature.description}</p>
                </motion.div>
              ))}
            </div>
            
            <div className="mt-20 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <motion.div 
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                className="relative"
              >
                <div className="rounded-2xl overflow-hidden shadow-xl">
                  <img 
                    src={productImageUrl} 
                    alt="CloudPro架构图" 
                    className="w-full h-auto object-cover"
                  />
                </div>
                <div className="absolute -top-4 -right-4 bg-blue-600 dark:bg-blue-500 text-white p-3 rounded-lg shadow-lg">
                  <p className="text-sm font-medium">最新版本: 3.5.0</p>
                </div>
              </motion.div>
              
              <motion.div 
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
              >
                <h3 className="text-2xl md:text-3xl font-bold mb-6">产品特点与优势</h3>
                
                <div className="space-y-6">
                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600 dark:text-green-400">
                      <i className="fa-check"></i>
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold mb-1">多区域部署</h4>
                      <p className="text-slate-600 dark:text-slate-300">全球20+数据中心，确保低延迟访问和数据本地化合规</p>
                    </div>
                  </div>
                  
                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600 dark:text-green-400">
                      <i className="fa-check"></i>
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold mb-1">全方位安全保障</h4>
                      <p className="text-slate-600 dark:text-slate-300">端到端加密、多因素认证、定期安全审计，保障数据安全</p>
                    </div>
                  </div>
                  
                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600 dark:text-green-400">
                      <i className="fa-check"></i>
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold mb-1">灵活计费模式</h4>
                      <p className="text-slate-600 dark:text-slate-300">按需付费、包年包月多种计费方式，优化IT支出</p>
                    </div>
                  </div>
                  
                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600 dark:text-green-400">
                      <i className="fa-check"></i>
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold mb-1">7×24专业支持</h4>
                      <p className="text-slate-600 dark:text-slate-300">全天候技术支持团队，快速响应解决问题</p>
                    </div>
                  </div>
                </div>
                
                <button className="mt-8 inline-flex items-center text-blue-600 dark:text-blue-400 font-medium hover:text-blue-800 dark:hover:text-blue-300 transition-colors">
                  查看完整功能列表 <i className="fa-arrow-right ml-2"></i>
                </button>
              </motion.div>
            </div>
          </div>
        </section>

        {/* Video Explanation Section */}
        <section id="video" className="py-20 bg-slate-50 dark:bg-slate-800">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="text-center max-w-3xl mx-auto mb-16"
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-4">观看视频讲解</h2>
              <p className="text-lg text-slate-600 dark:text-slate-300">
                通过视频快速了解CloudPro的核心功能和使用方法
              </p>
            </motion.div>
            
            <motion.div 
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.8 }}
              className="max-w-4xl mx-auto bg-white dark:bg-slate-900 rounded-2xl overflow-hidden shadow-2xl"
            >
              <div className="relative aspect-video">
                <video 
                  controls
                  className="w-full h-full object-cover"
                  poster="https://picsum.photos/1280/720?random=10"
                >
                  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4" />
                  您的浏览器不支持视频播放。
                </video>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">CloudPro 快速入门教程</h3>
                <p className="text-slate-600 dark:text-slate-300 mb-4">
                  全面介绍CloudPro的核心功能和基本操作，帮助您快速上手使用我们的云服务平台
                </p>
                <div className="flex items-center text-slate-500 dark:text-slate-400 text-sm">
                  <span className="flex items-center"><i className="fa-eye mr-1"></i> 12.5k</span>
                  <span className="mx-3">•</span>
                  <span className="flex items-center"><i className="fa-calendar mr-1"></i> 2天前</span>
                </div>
              </div>
            </motion.div>
            
            <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                { 
                  title: "功能详解：数据备份与恢复", 
                  duration: "8:45", 
                  views: "5.2k",
                  videoUrl: "https://www.w3schools.com/html/movie.mp4"
                },
                { 
                  title: "管理员指南：用户权限管理", 
                  duration: "14:20", 
                  views: "3.8k",
                  videoUrl: "https://www.w3schools.com/html/movie.mp4"
                },
                { 
                  title: "高级功能：API集成教程", 
                  duration: "18:15", 
                  views: "2.5k",
                  videoUrl: "https://www.w3schools.com/html/movie.mp4"
                }
              ].map((video, index) => (
                <motion.div 
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  className="bg-white dark:bg-slate-900 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow"
                >
                  <div className="relative aspect-video">
                    <video 
                      controls
                      className="w-full h-full object-cover"
                      poster={`https://picsum.photos/600/340?random=${11 + index}`}
                    >
                      <source src={video.videoUrl} type="video/mp4" />
                      您的浏览器不支持视频播放。
                    </video>
                    {/* <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none">
                      {video.duration}
                    </div> */}
                  </div>
                  <div className="p-4">
                    <h3 className="font-semibold mb-2 line-clamp-2">{video.title}</h3>
                    <div className="flex items-center text-slate-500 dark:text-slate-400 text-sm">
                      <span className="flex items-center"><i className="fa-eye mr-1"></i> {video.views}</span>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* Download Section */}
        <section id="download" className="py-20 bg-white dark:bg-slate-900">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="text-center max-w-3xl mx-auto mb-16"
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-4">立即下载使用</h2>
              <p className="text-lg text-slate-600 dark:text-slate-300">
                选择适合您设备的版本，开始体验CloudPro的强大功能
              </p>
            </motion.div>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
              {downloadOptions.map((option, index) => (
                <motion.div 
                  key={option.platform}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  className="bg-slate-50 dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
                >
                  <div className="text-center mb-4">
                    <div className="w-16 h-16 mx-auto bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
                      <i className={`fa-${option.icon} text-2xl`}></i>
                    </div>
                    <h3 className="text-xl font-semibold">{option.platform}</h3>
                  </div>
                  <div className="text-center text-sm text-slate-500 dark:text-slate-400 mb-6">
                    <p>版本: {option.version}</p>
                    <p>大小: {option.size}</p>
                  </div>
                  <a 
                    href={option.link}
                    className="block w-full py-3 text-center text-white bg-blue-600 dark:bg-blue-500 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors font-medium"
                  >
                    <i className="fa-download mr-2"></i>立即下载
                  </a>
                </motion.div>
              ))}
            </div>
            
            <div className="mt-16 bg-slate-50 dark:bg-slate-800 rounded-2xl p-8 max-w-3xl mx-auto border border-slate-200 dark:border-slate-700">
              <div className="text-center mb-8">
                <h3 className="text-2xl font-bold mb-2">需要帮助?</h3>
                <p className="text-slate-600 dark:text-slate-300">查看详细的安装指南和常见问题解答</p>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <a href="#" className="flex flex-col items-center p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-md transition-shadow">
                  <i className="fa-book text-blue-600 dark:text-blue-400 text-2xl mb-3"></i>
                  <span className="font-medium">安装文档</span>
                </a>
                <a href="#" className="flex flex-col items-center p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-md transition-shadow">
                  <i className="fa-question-circle text-blue-600 dark:text-blue-400 text-2xl mb-3"></i>
                  <span className="font-medium">常见问题</span>
                </a>
                <a href="#" className="flex flex-col items-center p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-md transition-shadow">
                  <i className="fa-life-ring text-blue-600 dark:text-blue-400 text-2xl mb-3"></i>
                  <span className="font-medium">技术支持</span>
                </a>
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="max-w-3xl mx-auto"
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-6">准备好开始您的云之旅了吗?</h2>
              <div className="flex flex-col sm:flex-row justify-center gap-4">
              </div>
            </motion.div>
          </div>
        </section>
      </main>

    </div>
  );
}
